<template>
    <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
        <slot />
    </el-select>
</template>

<script>
import Sortable from "sortablejs";

export default {
    name: "DragSelect",
    props: {
        value: {
            type: Array,
            required: true
        }
    },
    computed: {
        selectVal: {
            get() {
                return [...this.value];
            },
            set(val) {
                this.$emit("input", [...val]);
            }
        }
    },
    mounted() {
        this.setSort();
    },
    methods: {
        setSort() {
            const el = this.$refs.dragSelect.$el.querySelectorAll(".el-select__tags > span")[0];
            this.sortable = Sortable.create(el, {
                ghostClass: "sortable-ghost", // Class name for the drop placeholder,
                setData: function(dataTransfer) {
                    dataTransfer.setData("Text", "");
                    // to avoid Firefox bug
                    // Detail see : https://github.com/RubaXa/Sortable/issues/1012
                },
                onEnd: evt => {
                    const targetRow = this.value.splice(evt.oldIndex, 1)[0];
                    this.value.splice(evt.newIndex, 0, targetRow);
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.drag-select {
  ::v-deep {
    .sortable-ghost {
      opacity: .8;
      color: #fff !important;
      background: #42b983 !important;
    }

    .el-tag {
      cursor: pointer;
    }
  }
}
</style>
